<template>
  <div class="replacePackage">
    <div class="replaceWrap">
      <h2>请选择替换下面哪个礼品包</h2>
      <myPackage isReplace @replacePackage="replacePackage"></myPackage>
      <div class="footer">
        <b class="button-w" @click="closeRepalcePackage">取消</b>
        <b class="button-n">确定</b>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import MyPackage from '../../base/myPackage/index'
export default {
  name: 'replacePackage',
  components: {
    MyPackage
  },
  data () {
    return {
      setId: '',
      oldSetId: '',
      isFarObj: {}
    }
  },
  methods: {
    replacePackage (arr) { // [新礼包id, 地区对象(偏远非偏远)]
      this.setId = arr[0]
      this.isFarObj = arr[1]
      this.$emit('showReplacePackage')
    },
    closeRepalcePackage () {
      this.$emit('closeReplacePackage')
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.replacePackage
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background rgba(0, 0, 0, 0.6)
  overflow auto
  .replaceWrap
    position absolute
    text-align center
    top 20vh
    width 600px
    background #ffffff
    padding 30px 40px
    left 0
    right 0
    margin 0 auto
    h2
      font-size 18px
      font-weight bold
      line-height 30px
      margin-bottom 20px
    .footer
      text-align center
      margin-top 40px
</style>
